<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>了解vue组件 | 诶无痕和诶有痕</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="点击事件和v-if（v-show）的组合使用123456789101112131415161718192021222324252627282930313233343536373839&lt;template&gt;  &lt;div class&#x3D;&quot;aBody&quot;&gt;    &lt;span class&#x3D;&quot;title&quot;&gt;我，子组件。&lt;&#x2F;span&amp;">
<meta property="og:type" content="article">
<meta property="og:title" content="了解vue组件">
<meta property="og:url" content="http://example.com/2022/03/16/%E4%BA%86%E8%A7%A3vue%E7%BB%84%E4%BB%B6/index.html">
<meta property="og:site_name" content="诶无痕和诶有痕">
<meta property="og:description" content="点击事件和v-if（v-show）的组合使用123456789101112131415161718192021222324252627282930313233343536373839&lt;template&gt;  &lt;div class&#x3D;&quot;aBody&quot;&gt;    &lt;span class&#x3D;&quot;title&quot;&gt;我，子组件。&lt;&#x2F;span&amp;">
<meta property="og:locale" content="zh_CH">
<meta property="article:published_time" content="2022-03-16T09:01:08.000Z">
<meta property="article:modified_time" content="2022-03-16T09:23:24.023Z">
<meta property="article:author" content="诶无痕和诶有痕">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="诶无痕和诶有痕" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 5.4.1"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">诶无痕和诶有痕</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-了解vue组件" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/16/%E4%BA%86%E8%A7%A3vue%E7%BB%84%E4%BB%B6/" class="article-date">
  <time datetime="2022-03-16T09:01:08.000Z" itemprop="datePublished">2022-03-16</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      了解vue组件
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="点击事件和v-if（v-show）的组合使用"><a href="#点击事件和v-if（v-show）的组合使用" class="headerlink" title="点击事件和v-if（v-show）的组合使用"></a>点击事件和v-if（v-show）的组合使用</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;aBody&quot;&gt;</span><br><span class="line">    &lt;span class=&quot;title&quot;&gt;我，子组件。&lt;/span&gt;</span><br><span class="line">    &lt;!-- 通过v-if或v-show的方式让标签消失出现 --&gt;</span><br><span class="line">    &lt;span class=&quot;info&quot; v-show=&quot;isShow&quot;&gt;&#123;&#123;title&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span class=&quot;info&quot; v-if=&quot;isShow&quot;&gt;&#123;&#123;title&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;!-- 给btn添加点击事件 @ 是 v-on:  的语法糖--&gt;</span><br><span class="line">    &lt;button class=&quot;btn&quot; @click=&quot;changeInfo&quot;&gt;展示info&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  data()&#123;</span><br><span class="line">    // 必须有返回值，且返回一个对象</span><br><span class="line">    // 返回的是一个vue的对象，所以里面的变量可以是用，  this.xxx获取</span><br><span class="line">    return &#123;</span><br><span class="line">      title:&#x27;&#x27;,</span><br><span class="line">      isShow:false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    changeInfo:function() &#123;</span><br><span class="line">      this.title = &#x27;啊被发现了吗!  ,,ԾㅂԾ,,&#x27;;</span><br><span class="line">      // 点击后将isShow取反后的值赋值给他自己，</span><br><span class="line">      // 以实现通过点击然一个标签消失，出现</span><br><span class="line">      this.isShow = !this.isShow;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line"></span><br><span class="line">.btn &#123;</span><br><span class="line">  width: 100px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h1 id="slot插槽"><a href="#slot插槽" class="headerlink" title="slot插槽"></a>slot插槽</h1><p>通过使用插槽可以在子组件中写入信息，如下：(JuniorSon是一个组件)</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;JuniorSon @results = &quot;accept&quot; class=&quot;son&quot; :index = &#x27;infos&#x27; item = &#x27;haha&#x27;&gt;</span><br><span class="line">    &lt;span&gt;&#123;&#123;something&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span v-show=&quot;isShow&quot;&gt;son发来贺电：&#123;&#123;toBStr&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;button class=&quot;f-btn&quot;&gt;点击发送信息给son&lt;/button&gt;</span><br><span class="line">&lt;/JuniorSon&gt;</span><br></pre></td></tr></table></figure>
<p>在子组件中通过slot接收上面JuniorSon标签中的信息，否则JuniorSon标签中的信息就不会显示<br>slot所在位置就是JuniorSon标签中的信息所在位置</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;aBody&quot;&gt;</span><br><span class="line">    &lt;!-- 插槽让组件的标签可以些内容，这些内容将放到slot中 --&gt;</span><br><span class="line">    &lt;slot&gt;&lt;/slot&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>
<h1 id="计算函数"><a href="#计算函数" class="headerlink" title="计算函数"></a>计算函数</h1><p>模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。<br>通过计算函数，减少标签中的逻辑性代码<br>计算函数都放在computed中，并且计算函数不能使用箭头函数（除非你不使用this）<br>如下计算函数toBStr，在使用时直接使用函数名即可</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;JuniorSon @results = &quot;accept&quot; class=&quot;son&quot; :index = &#x27;infos&#x27; item = &#x27;haha&#x27;&gt;</span><br><span class="line">    &lt;span&gt;&#123;&#123;something&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span v-show=&quot;isShow&quot;&gt;son发来贺电：&#123;&#123;toBStr&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;button class=&quot;f-btn&quot;&gt;点击发送信息给son&lt;/button&gt;</span><br><span class="line">&lt;/JuniorSon&gt;</span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  components:&#123;</span><br><span class="line">    JuniorSon</span><br><span class="line">  &#125;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      something:&#x27;我是你爸爸&#x27;,</span><br><span class="line">      infos:&#x27;我是你爸爸，我有钱。哎╮（╯＿╰）╭&#x27;,</span><br><span class="line">      // 存放son传递过来的数据</span><br><span class="line">      sonData:[],</span><br><span class="line">      isShow:false</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    // 通过自定义事件接收juniorSon发送的信息</span><br><span class="line">    accept:function(event) &#123;</span><br><span class="line">      // 打印信息</span><br><span class="line">      console.log(event,arguments)</span><br><span class="line">      // 将信息存入sonData</span><br><span class="line">      const list = Array.from(arguments);</span><br><span class="line">      list.forEach(item =&gt; &#123;</span><br><span class="line">        this.sonData.push(item);</span><br><span class="line">      &#125;)</span><br><span class="line">      // 接收并显示信息</span><br><span class="line">      this.isShow = true</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  computed:&#123;</span><br><span class="line">    toBStr:function()&#123;</span><br><span class="line">      let str = &#x27;&#x27;;</span><br><span class="line">      this.sonData.forEach(item =&gt; &#123;</span><br><span class="line">        str += item + &#x27; &#x27;;</span><br><span class="line">      &#125;)</span><br><span class="line">      return str;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="监听函数"><a href="#监听函数" class="headerlink" title="监听函数"></a>监听函数</h1><p>监听函数放在watch中<br>函数名就是需要监听的变量名，<br>参数1–变化后的值<br>参数2–变化前的值</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">watch:&#123;</span><br><span class="line">    isShow:function(newData,oldData) &#123;</span><br><span class="line">      console.log(newData,oldData);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h1 id="组件的生命周期"><a href="#组件的生命周期" class="headerlink" title="组件的生命周期"></a>组件的生命周期</h1><h2 id="生命周期函数"><a href="#生命周期函数" class="headerlink" title="生命周期函数"></a>生命周期函数</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">beforeCreate()&#123;&#125;</span><br><span class="line">created()&#123;&#125;</span><br><span class="line">beforeMount()&#123;&#125;</span><br><span class="line">mounted()&#123;&#125;</span><br><span class="line">beforeUpdate()&#123;&#125;</span><br><span class="line">updated()&#123;&#125;</span><br><span class="line">beforeDestroy()&#123;&#125;</span><br><span class="line">destroyed()&#123;&#125;</span><br></pre></td></tr></table></figure>
<h2 id="生命周期的4个阶段"><a href="#生命周期的4个阶段" class="headerlink" title="生命周期的4个阶段"></a>生命周期的4个阶段</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">create</span><br><span class="line">mount</span><br><span class="line">update</span><br><span class="line">destroy</span><br></pre></td></tr></table></figure>
<h2 id="生命周期函数的使用"><a href="#生命周期函数的使用" class="headerlink" title="生命周期函数的使用"></a>生命周期函数的使用</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">export default &#123;</span><br><span class="line">beforeCreate()&#123;</span><br><span class="line">    console.log(&#x27;实例化前&#x27;)</span><br><span class="line">  &#125;,</span><br><span class="line">  created()&#123;</span><br><span class="line">    console.log(&#x27;完成实例&#x27;)</span><br><span class="line">  &#125;,</span><br><span class="line">  beforeMount()&#123;</span><br><span class="line">    console.log(&#x27;挂载前&#x27;)</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted()&#123;</span><br><span class="line">    console.log(&#x27;完成挂载&#x27;) </span><br><span class="line">  &#125;,</span><br><span class="line">  beforeUpdate()&#123;</span><br><span class="line">    console.log(&#x27;数据更新，视图未更新&#x27;)</span><br><span class="line">  &#125;,</span><br><span class="line">  updated()&#123;</span><br><span class="line">    console.log(&#x27;数据更新，视图更新&#x27;)</span><br><span class="line">  &#125;,</span><br><span class="line">  beforeDestroy()&#123;</span><br><span class="line">    console.log(&#x27;销毁前&#x27;)</span><br><span class="line">  &#125;,</span><br><span class="line">  destroyed()&#123;</span><br><span class="line">    console.log(&#x27;销毁完成&#x27;)</span><br><span class="line">  &#125;&#125;</span><br></pre></td></tr></table></figure>
<h1 id="双向绑定"><a href="#双向绑定" class="headerlink" title="双向绑定"></a>双向绑定</h1><h2 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h2><p>通过向input中输入值，v-model将输入的值保存到message中，</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;cla&quot;&gt;&#123;&#123;message&#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;input type=&quot;text&quot; v-model=&quot;message&quot;&gt;</span><br></pre></td></tr></table></figure>
<h1 id="请求接口的时机"><a href="#请求接口的时机" class="headerlink" title="请求接口的时机"></a>请求接口的时机</h1><p>created(){}中请求接口<br>接口的请求是异步的(请求的时间不确定)，解决<br>1.默认值<br>2.loading<br>数据没有加载完就使用默认的数据（loading显示），加载完成后就使用真正的数据（loading隐藏）<br>数据没有加载完就只能看见loading的加载页面</p>
<h1 id="父组件，子组件传值"><a href="#父组件，子组件传值" class="headerlink" title="父组件，子组件传值"></a>父组件，子组件传值</h1><h2 id="父组件传值子组件"><a href="#父组件传值子组件" class="headerlink" title="父组件传值子组件"></a>父组件传值子组件</h2><p>1.在父组件中先引入子组件，并注册。<br>2.然后就可以通过给组件JuniorSon设置动态绑定的属性，或静态属性，将数据传递给子组件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- : 是v-bind: 的语法糖 使用后属性就可以直接使用变量了 --&gt;</span><br><span class="line">&lt;!-- 如果传递给子组件的信息是自定义属性，这样子组件的props不能获取到传递的信息，但可以通过this.$attrs获取到自定义属性信息 --&gt;</span><br><span class="line">  &lt;JuniorSon @results = &quot;accept&quot; class=&quot;son&quot; :index = &#x27;infos&#x27; item = &#x27;haha&#x27;&gt;</span><br><span class="line">    &lt;span&gt;&#123;&#123;something&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span v-show=&quot;isShow&quot;&gt;son发来贺电：&#123;&#123;toBStr&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;button class=&quot;f-btn&quot;&gt;点击发送信息给son&lt;/button&gt;</span><br><span class="line">  &lt;/JuniorSon&gt;</span><br></pre></td></tr></table></figure>
<p>3.子组件通过props接收父组件传过来的信息<br>4.接收完毕后就可以使用了，用法和data中的变量一样</p>
<p>this.$props指向vue实例的props<br>this.props指向data中的props<br>this.$attrs可以获取到父组件传递过来的自定义属性的数据(数据如果没有在props中接收，那么就可以在attrs中找到未被接收的数据，如果props将数据全部接收，那么attrs中就没有可用的数据)<br>props有两种接收信息的方式</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">props: [&quot;index&quot;,&quot;item&quot;]</span><br><span class="line">//通过数组接收信息，变量名就是前面的自定义属性名（不能改变）</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">props:&#123;</span><br><span class="line">    index:&#123;</span><br><span class="line">      type:String,</span><br><span class="line">      required:true</span><br><span class="line">    &#125;,</span><br><span class="line">    item:&#123;</span><br><span class="line">      type:String,</span><br><span class="line">      required:true</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">    //通过对象接收信息,这样可以设置每一个变量的类型等。</span><br></pre></td></tr></table></figure>
<h3 id="子组件接收数据注意事项"><a href="#子组件接收数据注意事项" class="headerlink" title="子组件接收数据注意事项"></a>子组件接收数据注意事项</h3><p>子组件接受的父组件的值分为——引用类型和普通类型两种，<br>1.普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）<br>2.引用类型：数组（Array）、对象（Object）</p>
<p>其中，普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值，<br>但是，引用类型的值，当在子组件中修改后，父组件的也会修改，<br>那么后果就是，其他同样引用了改值的子组件内部的值也会跟着被修改。<br>除非你有特殊的要求这么去做，否则最好不要这么做。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">父组件传给子组件的值，在子组件中千万不能修改，因其数据是公用的，改了所有引用的子组件就都改了。</span><br></pre></td></tr></table></figure>
<h2 id="子组件传递数据给父组件"><a href="#子组件传递数据给父组件" class="headerlink" title="子组件传递数据给父组件"></a>子组件传递数据给父组件</h2><p>子组件通过this.$emit()将数据传给父组件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">// 参数1---父子间中，使用子组件时定义的自定义事件的事件处理函数</span><br><span class="line">// 参数2，3，4---传递参数</span><br><span class="line">this.$emit(&#x27;results&#x27;,&#x27;你是个大帅逼&#x27;,&#x27;没错说的就是你&#x27;,&#x27;big SB&#x27;,)</span><br></pre></td></tr></table></figure>
<p>父组件通过JuniorSon上的自定义事件的事件处理函数，接收并处理数据</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 如果传递给子组件的信息是自定义属性，这样子组件的props不能获取到传递的信息，但可以通过this.$attrs获取到自定义属性信息 --&gt;</span><br><span class="line">  &lt;JuniorSon @results = &quot;accept&quot; class=&quot;son&quot; :index = &#x27;infos&#x27; item = &#x27;haha&#x27;&gt;</span><br><span class="line">    &lt;span&gt;&#123;&#123;something&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span v-show=&quot;isShow&quot;&gt;son发来贺电：&#123;&#123;toBStr&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;button class=&quot;f-btn&quot;&gt;点击发送信息给son&lt;/button&gt;</span><br><span class="line">  &lt;/JuniorSon&gt;</span><br></pre></td></tr></table></figure>
<h2 id="兄弟组件互传信息"><a href="#兄弟组件互传信息" class="headerlink" title="兄弟组件互传信息"></a>兄弟组件互传信息</h2><p>其中一个兄弟组件将信息先传递给父组件，再通过父组件将信息传递给另有一个兄弟组件</p>
<h2 id="父组件"><a href="#父组件" class="headerlink" title="父组件"></a>父组件</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- : 是v-bind: 的语法糖 使用后属性就可以直接使用变量了 --&gt;</span><br><span class="line">&lt;!-- 传递给子组件的信息不能是自定义属性，这样子组件的props不能获取到传递的信息，但可以通过this.$attrs获取到自定义属性信息 --&gt;</span><br><span class="line">  &lt;JuniorSon @results = &quot;accept&quot; class=&quot;son&quot; :index = &#x27;infos&#x27; item = &#x27;haha&#x27;&gt;</span><br><span class="line">    &lt;span&gt;&#123;&#123;something&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span v-show=&quot;isShow&quot;&gt;son发来贺电：&#123;&#123;toBStr&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;button class=&quot;f-btn&quot;&gt;点击发送信息给son&lt;/button&gt;</span><br><span class="line">  &lt;/JuniorSon&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import JuniorSon from &#x27;./JuniorSon.vue&#x27;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  components:&#123;</span><br><span class="line">    JuniorSon</span><br><span class="line">  &#125;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      something:&#x27;我是你爸爸&#x27;,</span><br><span class="line">      infos:&#x27;我是你爸爸，我有钱。哎╮（╯＿╰）╭&#x27;,</span><br><span class="line">      // 存放son传递过来的数据</span><br><span class="line">      sonData:[],</span><br><span class="line">      isShow:false</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    // 通过自定义事件接收juniorSon发送的信息</span><br><span class="line">    accept:function(event) &#123;</span><br><span class="line">      // 打印信息</span><br><span class="line">      console.log(event,arguments)</span><br><span class="line">      // 将信息存入sonData</span><br><span class="line">      const list = Array.from(arguments);</span><br><span class="line">      list.forEach(item =&gt; &#123;</span><br><span class="line">        this.sonData.push(item);</span><br><span class="line">      &#125;)</span><br><span class="line">      // 接收并显示信息</span><br><span class="line">      this.isShow = true</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  computed:&#123;</span><br><span class="line">    toBStr:function()&#123;</span><br><span class="line">      let str = &#x27;&#x27;;</span><br><span class="line">      this.sonData.forEach(item =&gt; &#123;</span><br><span class="line">        str += item + &#x27; &#x27;;</span><br><span class="line">      &#125;)</span><br><span class="line">      return str;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">/* 设置组件的样式 */</span><br><span class="line">.son &#123;</span><br><span class="line">  width: 100%;</span><br><span class="line">  display: flex;</span><br><span class="line">  flex-direction: column;</span><br><span class="line">  align-content: center;</span><br><span class="line">  justify-content: center;</span><br><span class="line">&#125;</span><br><span class="line">span &#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.f-btn &#123;</span><br><span class="line">  margin: 20px 0;</span><br><span class="line">  width: 200px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h2 id="子组件"><a href="#子组件" class="headerlink" title="子组件"></a>子组件</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;aBody&quot;&gt;</span><br><span class="line">    &lt;!-- 插槽让组件的标签可以些内容，这些内容将放到slot中 --&gt;</span><br><span class="line">    &lt;slot&gt;&lt;/slot&gt;</span><br><span class="line">    &lt;span class=&quot;title&quot;&gt;我，子组件。&lt;/span&gt;</span><br><span class="line">    &lt;!-- 通过v-if或v-show的方式让标签消失出现 --&gt;</span><br><span class="line">    &lt;!-- 前者是删除，后者是隐藏 --&gt;</span><br><span class="line">    &lt;span class=&quot;info&quot; v-show=&quot;isShow&quot;&gt;&#123;&#123;title&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span class=&quot;info&quot; v-if=&quot;isShow&quot;&gt;father发来亲切的问候：&#123;&#123;index&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;!-- 给btn添加点击事件 @ 是 v-on:  的语法糖--&gt;</span><br><span class="line">    &lt;button class=&quot;btn&quot; @click=&quot;changeInfo&quot;&gt;展示info&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">    &lt;button class=&quot;f-btn&quot; @click=&quot;sendInfoToFather&quot;&gt;点击发送信息给father&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  // </span><br><span class="line">  // props: [&quot;index&quot;,&quot;item&quot;],</span><br><span class="line">  // </span><br><span class="line">  props:&#123;</span><br><span class="line">    index:&#123;</span><br><span class="line">      type:String,</span><br><span class="line">      required:true</span><br><span class="line">    &#125;,</span><br><span class="line">    item:&#123;</span><br><span class="line">      type:String,</span><br><span class="line">      required:true</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  data()&#123;</span><br><span class="line">    // 必须有返回值，且返回一个对象</span><br><span class="line">    // 返回的是一个vue的对象，所以里面的变量可以是用，  this.xxx获取</span><br><span class="line">    return &#123;</span><br><span class="line">      title:&#x27;&#x27;,</span><br><span class="line">      isShow:false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    changeInfo:function() &#123;</span><br><span class="line">      this.title = &#x27;啊被发现了吗!  ,,ԾㅂԾ,,&#x27;;</span><br><span class="line">      // 点击后将isShow取反后的值赋值给他自己，以实现通过点击然一个标签消失，出现</span><br><span class="line">      this.isShow = !this.isShow;</span><br><span class="line"></span><br><span class="line">      // 获取信息</span><br><span class="line">      console.log(this.$attrs)</span><br><span class="line">      console.log(this.$props)</span><br><span class="line">      console.log(this.index,this.item)</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    // 将信息发送给SeniorFather</span><br><span class="line">    sendInfoToFather: function() &#123;</span><br><span class="line">      // 参数1---父子间中，使用子组件时定义的自定义事件的事件处理函数</span><br><span class="line">      // 参数2，3，4---传递参数</span><br><span class="line">      this.$emit(&#x27;results&#x27;,&#x27;你是个大帅逼&#x27;,&#x27;没错说的就是你&#x27;,&#x27;big SB&#x27;,)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line"></span><br><span class="line">.info ,.title &#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.btn &#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.f-btn &#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">  margin-top: 20px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/16/%E4%BA%86%E8%A7%A3vue%E7%BB%84%E4%BB%B6/" data-id="cl0tcw4lz0000low652clh0e5" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2022/03/20/axios%E5%AD%A6%E4%B9%A0/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          axios学习
        
      </div>
    </a>
  
  
    <a href="/2022/03/16/%E7%BB%83%E4%B9%A0%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%EF%BC%8C%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%EF%BC%8C%E8%A1%A8%E5%8D%95%EF%BC%8C%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">练习条件渲染，列表渲染，表单，获取节点</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/03/">March 2022</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2022/03/23/vuex%E5%AD%A6%E4%B9%A0/">vuex学习</a>
          </li>
        
          <li>
            <a href="/2022/03/22/vuew-router%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/">vuew-router的基本使用</a>
          </li>
        
          <li>
            <a href="/2022/03/22/vue-router%E7%9A%84%E5%88%9B%E5%BB%BA%E8%BF%87%E7%A8%8B/">vue-router的创建过程</a>
          </li>
        
          <li>
            <a href="/2022/03/20/axios%E5%AD%A6%E4%B9%A0/">axios学习</a>
          </li>
        
          <li>
            <a href="/2022/03/16/%E4%BA%86%E8%A7%A3vue%E7%BB%84%E4%BB%B6/">了解vue组件</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2022 诶无痕和诶有痕<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">

  
<script src="/fancybox/jquery.fancybox.pack.js"></script>




<script src="/js/script.js"></script>




  </div>
</body>
</html>